<template>
  <div class="container">
    <el-row class="wrap-search">
      <el-button
        icon="el-icon-edit"
        @click="$router.push('/productEdit')"
        type="primary"
        size="medium"
      >新增商品</el-button>
    </el-row>
    <el-row class="wrap-search">
      <div class="search-item">
        <div class="search-title">商品名称：</div>
        <el-input  v-model="configList.param.name"></el-input>
      </div>
      <el-button
        icon="el-icon-search"
        class="search-btn"
        type="primary"
        @click="getList()"
      >查询</el-button>
    </el-row>
    <div class="">
      <table-list
        ref="tableList"
        :tableConfig='configList'
        @selectTable="selectTable"
      >
        <!-- <el-table-column
          slot="select"
          align="center"
          label="全选"
          type="selection"
          width="55"
        >
        </el-table-column> -->
        <el-table-column
          slot="image"
          align="center"
          label="商品图"
        >
          <template slot-scope="scope">
            <!--<img class="video-img" :src="scope.row.avatarUrl" alt="">-->
            <div
              :style="{backgroundImage: 'url('+scope.row.cover_image+')'}"
              style="width: 60px;height: 60px;background-size: cover;border-radius: 30px;margin: 0 auto;"
            ></div>
          </template>
        </el-table-column>
        <el-table-column
          class="btn"
          width="240px"
          label="操作"
          slot="btn"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              @click="$router.push('/productEdit?id='+scope.row.id)"
              type="primary"
              size="small"
            >编辑</el-button>
            <el-button
              icon="el-icon-delete"
              class="search-btn"
              size="small"
              type="danger"
              @click="delLevel(scope.row.id)"
            >删除</el-button>
            <!-- <el-button v-if="scope.row.isRefundBtn == 'y'" class="search-btn" size="small" type="danger" @click="refundBtn(scope.row.id)">退款</el-button> -->
          </template>
        </el-table-column>
      </table-list>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      size="tiny"
    >
      <img
        :src="imgUrl"
        alt=""
      >
    </el-dialog>
  </div>
</template>

<script>
let CONSTANT = require("../constant/constant.js");
let common = require("../common.js");
import TableList from "./common/my-table";
export default {
  data() {
    return {
      configList: {
        url: CONSTANT.URL.productList,
        configList: [
          {
            slot: "select"
          },
          {
            slot: "image"
          },
          {
            label: "商品名称",
            prop: "name"
          },
          {
            label: "价格",
            prop: "balance_cost"
          },
          //						{
          //							label:'库存',
          //							prop:'sexText'
          //						},
          {
            slot: "btn"
          }
        ],
        param: {
          nicknameLike: "",
          name:''
        },
        type: "",
        width: "",
        isPagination: true
      },
      dialogVisible: false,
      dialogVisible1: false,
      imgUrl: "",
      upLoadUrl: ""
    };
  },
  components: {
    "table-list": TableList
  },
  created() {},
  mounted() {},
  methods: {
    getList() {
      this.$refs.tableList.getList();
    },
    _dateFormate(value) {
      return common.dateFormate(value);
    },
    imgClick(url) {
      this.imgUrl = url;
      this.dialogVisible = true;
    },
    showPage(id) {
      this.dialogVisible1 = true;
      this.getNums(id);
    },
    hotBtn(id, state) {
      let url = CONSTANT.URL.CAR.SAVEHOT,
        dataForm = {},
        data = {
          isHot: state ? "" : 1,
          id: id
        };
      common.requestAjax(url, JSON.stringify(data), dataForm, res => {
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: res.msg
          });
          this.getList();
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
      });
    },
    delLevel(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.productDel,
            param = { product_id: id };
          common.requestGetAjax(url, {}, param, res => {
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    upBtn(id) {
      this.$confirm("确定上架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.CAR.SETDELETE,
            param = { id: id, status: "on" };
          common.requestAjax(url, JSON.stringify(param), null, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消上架"
          });
        });
    },
    downBtn(id) {
      this.$confirm("确定下架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.CAR.SETDELETE,
            param = { id: id, status: "off" };
          common.requestAjax(url, JSON.stringify(param), null, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下架"
          });
        });
    },
    handleRemove(file, fileList) {
      // 图片上传
      let deleteUrl = file.url;
      let list = this.information.images;
      list.forEach(function(item, index) {
        if (item.fileUrl == deleteUrl) {
          list.splice(index, 1);
        }
      });
      console.log(list);
      this.information.images = list;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleFileSuccess(res, file) {
      if (res.status == 200) {
        let picItem = res.data.bussData;
        this.information.images.push(picItem);
        this.fileListChange();
      }
    },
    selectTable(val) {
      console.log(val);
      this.ids = [];
      val.map(item => {
        this.ids.push(item.id);
      });
    },
    delAll() {
      if (!this.ids.length) {
        this.$message({
          type: "warning",
          message: "请选择批量删除的记录"
        });
        return false;
      }
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.USERCORE.DELETES;
          common.requestAjax(url, {}, { ids: this.ids }, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss">
.container {
  .wrap-search {
    margin-bottom: 20px;
    .search-item {
      float: left;
      margin-right: 20px;
      margin-top: 20px;
      .el-input,
      .el-select {
        width: 180px;
      }
    }
    button {
      float: left;
      margin-top: 20px;
    }
    .search-title {
      display: inline;
      width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: right;
      margin-bottom: 20px;
      margin-right: 10px;
    }
  }
  .el-table__row {
    .cell {
      button {
        margin-top: 10px;
      }
    }
    video {
      width: 100px;
      height: auto;
    }
    img.video-img {
      width: 60px;
      height: 60px;
      cursor: pointer;
      border-radius: 30px;
    }
  }
  .pagination {
    text-align: center;
    width: 80%;
    margin-top: 60px;
  }
  .el-dialog__body {
    img {
      display: block;
      margin: 0 auto;
    }
  }
  .user-num {
    color: #409eff;
    cursor: pointer;
  }

  .avatar {
    width: 50px !important;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }
}
</style>
